babel-preset-solid

What is babel-preset-solid?

babel-preset-solid is a Babel preset for compiling Solid.js applications. Solid.js is a declarative JavaScript library for creating user interfaces. This preset transforms JSX syntax and other Solid.js specific features into JavaScript code that can be executed in the browser.

What are babel-preset-solid's main functionalities?

JSX Transformation

Transforms JSX syntax into JavaScript code that Solid.js can understand and render.

const App = () => <div>Hello, Solid!</div>;

Reactive Primitives

Supports Solid.js reactive primitives like createSignal, which allows for reactive state management.

import { createSignal } from 'solid-js';
const [count, setCount] = createSignal(0);
setCount(count() + 1);

Component Compilation

Compiles Solid.js components, enabling the use of props and component composition.

const Button = (props) => <button>{props.label}</button>;
const App = () => <Button label='Click me' />;

Other packages similar to babel-preset-solid

babel-preset-react

babel-preset-react is a Babel preset for compiling React applications. It transforms JSX syntax and other React-specific features into JavaScript code. While both presets handle JSX transformation, babel-preset-react is tailored for React's component model and lifecycle methods, whereas babel-preset-solid is optimized for Solid.js's fine-grained reactivity and compilation model.

babel-preset-preact

babel-preset-preact is a Babel preset for compiling Preact applications. Preact is a lightweight alternative to React with a similar API. This preset transforms JSX syntax for Preact. Compared to babel-preset-solid, babel-preset-preact focuses on Preact's lightweight and fast rendering, while babel-preset-solid is designed for Solid.js's reactivity and performance optimizations.

babel-preset-vue

babel-preset-vue is a Babel preset for compiling Vue.js applications. It transforms Vue's template syntax into JavaScript code. Unlike babel-preset-solid, which focuses on JSX and fine-grained reactivity, babel-preset-vue is tailored for Vue's template-based syntax and reactivity system.

README

babel-preset-solid

Babel preset to transform JSX into Solid runtime calls.

Install

Via NPM

npm install babel-preset-solid --save-dev

or Yarn

yarn add babel-preset-solid --dev

Usage

Make or update your .babelrc config file with the preset:

{
  "presets": [
    "solid"
  ]
}

Via package.json

   ...
   "babel": {
     "presets": [
       "es2015",
       "solid"
     ],
     "plugins": [
     ]
   },
   ...

Usage for SSR code

When need to transform JSX code to be used on the server, pass the following options

{
  "presets": [
    ["solid", { "generate": "ssr", "hydratable": true }]
  ]
}

And for the browser build pass the hydratable option as well:

{
  "presets": [
    ["solid", { "generate": "dom", "hydratable": true }]
  ]
}